<template>
	<view>
		<view class="panel" style="height: 350rpx;display: flex;flex-direction: column;align-items: center;justify-content: center;">
			<open-data class="avatar" type="userAvatarUrl"></open-data>
			<open-data class="nickName" type="userNickName"></open-data>
			<view style="display: flex;justify-content: center;align-items: center;">
				<view>{{info.phone}}</view>
			</view>
		</view>
		
		<view class="cell">
			<view class="cell-title">姓名</view>
			<view class="cell-content">{{info.name}}</view>
		</view>
		
		<view>管理范围</view>
		<uni-list>
			<uni-list-item :rightText="types[area.type-1]" v-for="(area, idx) in info.serverAreaList" :key="idx" 
			:title="area.name"></uni-list-item>
		</uni-list>
	</view>
</template>

<script>
	import uniListItem from "@/components/uni-list-item/uni-list-item.vue"
	import uniList from "@/components/uni-list/uni-list.vue"
	
	const app = getApp()

	export default {
		components: {
			uniList, uniListItem,
		},

		data() {
			return {
				logined: app.globalData.logined,
				phoned: app.globalData.authed,
				phone: app.globalData.phone,
				userInfo: app.globalData.userInfo,
				types:['小区', '水站', ],
				info:{
					"phone": "",  // 手机号
					"name": "", // 姓名
					"serverAreaList": [
						
					]
				}
			}
		},
		onLoad(opts) {
			uni.showLoading({
				title:'加载中...'
			})
			uni.request({
				header:{
					Authorization: 'Bearer ' + app.globalData.token,
				},
				url: app.globalData.domain+'staff/staffInfo',
				method: 'GET',
				data: {},
				success: res => {
					uni.hideLoading()
					const {data} = res
					if(data.code==200){
						this.info = data.data
					}else if(data.code==500){
						uni.showToast({
							icon:'none',
							title: data.message,
						});
					}
				},
				fail: (err) => {console.error(err)},
				complete: () => {
					
				}
			});
		},
		methods: {
			
		}
	}
</script>

<style scoped>
	.info {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		
	}
	
	.courtName{
		font-weight: bold;
	}

	.avatar {
		width: 128rpx;
		height: 128rpx;
		overflow: hidden;
		display: inline-block;
		border-radius: 50% 50%;
		border: solid 2px gray;
		box-shadow: 1px gray;
	}
</style>
